<!--通讯录页面-->
<template>
    <div class="address">
        <van-nav-bar
                title="通讯录"
                class="header"
                left-text=""
                left-arrow
                @click-left="goBackPage('/')">
            <template #right>
                <van-icon name="add-o" size="18" v-show="!tanBoxShow" @click="changeTanBoxShow()"/>
                <van-icon name="minus" size="18" v-show="tanBoxShow" @click="changeTanBoxShow()"/>
            </template>
        </van-nav-bar>
        <div class="tanBox" v-show="tanBoxShow">
            <div class="tanBoxInfo" @click="getGroupsList"><van-icon name="contact" style="margin: 0 10px"/>查看群组</div>
            <div class="tanBoxInfo" @click="addNewOne"><van-icon name="contact" style="margin: 0 10px"/>添加联系人</div>
        </div>
        <div class="botbox">
<!--             {{ addresslist }}-->
            <van-search
                    v-model="searchFriend"
                    placeholder="搜索朋友"
                    input-align="center"
            />
            <van-index-bar style="height:85%;overflow-y:auto;">
                <div v-for="item in addresslist" :key="item.key">
                    <van-index-anchor :index="item.key" />
                    <div class="addressjtemdiv" v-for="jtem in item.data" @click="toInfo(jtem)" :key="jtem.key">
                        <div style="height: 100%;width:4rem;margin:0 1rem; ">
                            <img
                                    v-if="jtem.name == '本机'"
                                    style="height: 3.5rem;width: 3.5rem;padding: 0.25rem; border-radius:50%;"
                                    src="img/headimg/head_icon_1.png"
                                    alt
                            />
                            <img
                                    v-else-if="jtem.name !== '本机'&&jtem.machinetype=='普通机'"
                                    style="height: 3.5rem;width: 3.5rem;padding: 0.25rem; border-radius:50%;"
                                    src="img/headimg/head_icon_2.png"
                                    alt
                            />
                            <img
                                    v-else-if="jtem.name !== '本机'&&jtem.machinetype=='指挥机'"
                                    style="height: 3.5rem;width: 3.5rem;padding: 0.25rem; border-radius:50%;"
                                    src="img/headimg/head_icon_3.png"
                                    alt
                            />
                            <img
                                    v-else
                                    style="height: 3.5rem;width: 3.5rem;padding: 0.25rem; border-radius:50%;"
                                    src="img/headimg/head_icon_4.png"
                                    alt
                            />
                        </div>
                        <div style="flex:1;display:flex;flex-direction:column">
                            <div style="font-weight: bold">{{ jtem.name }}</div>
                            <div style="display:flex; font-size: 0.8rem;color:#999">
                                <div>北斗卡号：{{ jtem.id }}</div>
                            </div>
                        </div>
                    </div>
                </div>
            </van-index-bar>
        </div>
        <!-- 下部选项条 -->
        <div class="underbox">
            <van-tabbar v-model="active">
                <van-tabbar-item icon="chat-o"  @click="jumpPage('/chatlist')">聊天</van-tabbar-item>
                <van-tabbar-item icon="friends-o">通讯录</van-tabbar-item>
                <van-tabbar-item icon="notes-o" @click="jumpPage('/messagebox')">报文管理</van-tabbar-item>
            </van-tabbar>
        </div>
    </div>
</template>
<script>
    export default {
        data() {
            return {
                tanBoxShow:false,
                searchFriend:'',

                active: 1,
                addresslist: null,
                notfound:true,
            }
        },
        methods: {
            goBackPage(url){
                this.$router.push(url);
            },
            changeTanBoxShow(){
                this.tanBoxShow=!this.tanBoxShow;
            },
            //查看群组列表
            getGroupsList(){
                this.$router.push(
                    {
                        path:'/groups'
                    }
                )
            },
            getAddressList() {
                this.addresslist=[];
                let res = $App.findAllPerson();
                this.addresslist = this._parseData(JSON.parse(res));
                // this.addresslist=[{key:'B',data:[{duty:'班长',focus:'无',id:'3424328',machinetype:'普通型',name:'本机',note:'本机',platformtype:'单兵',protocol:"wu",unit:'528'}]},
                //     {key:'C',data:[{duty:'班长',focus:'无',id:'3424328',machinetype:'普通型',name:'曹操',note:'本机',platformtype:'单兵',protocol:"wu",unit:'528'}]},
                //     {key:'D',data:[{duty:'班长',focus:'无',id:'3424328',machinetype:'指挥机',name:'邓操',note:'本机',platformtype:'单兵',protocol:"wu",unit:'528'}]}];
                if(this.addresslist.length){
                    this.notfound = false;
                }
            },
            jumpPage(url){
                this.$router.push(
                    {
                        path:url
                    }
                )
            },
            //构建数组
            _parseData(r) {
                let data = [];
                let chars = [];
                //生成a-z的数组
                for (let i = 65; i <= 90; i++) {
                    let key = (String.fromCharCode(i));
                    data.push({ "key": key, data: [] });
                    chars.push(key)
                }
                // address.dealdt = data;
                //填充数据
                r.forEach(o => {
                    data.forEach((item, index) => {
                        let a = o['szm'];//name属性
                        if (item.key === a.toUpperCase()) {
                            data[index].data.push(o['person']);
                        }
                    })
                });
                let finalData = []
                for (let i in data) {
                    if (data[i].data.length > 0) {
                        finalData.push(data[i])
                    }
                }
                return finalData // 返回通讯录数组
            },
            addNewOne(){
                this.$router.push(
                    {
                        path:'/addfriend'
                    }
                )

            },
            toInfo(data){
                this.$router.push({
                    path: "/friendinfo",
                    query: {
                        data: data
                    }
                });

            }
        },
        mounted() {
            this.getAddressList();
        }

    }
</script>
<style scoped>
    .address {
        height: 100%;
        width: 100%;
        display: flex;
        flex-direction: column;
    }
    .address .header{
        background-color: #153744;
        color: #ffffff;
    }
    .address .tanBox{
        background-color: rgba(21, 55, 68, 0.71);
        color: #ffffff;
        position: fixed;
        top: 45px;
        z-index: 999;
        right: 5px;
        width: 8rem;
    }
    .address .tanBox .tanBoxInfo{
        line-height: 30px;
        font-size: 16px;
        margin: 10px 0;
    }
    /deep/ .van-nav-bar .van-icon {
        color: #ffffff;
    }
    /deep/ .van-nav-bar .van-nav-bar__title {
        color: #ffffff;
    }
    .underbox {
        display: flex;
        flex-direction: column;
    }
    /deep/ .underbox .van-tabbar-item{
        color: #999999;
    }
    /deep/ .underbox .van-tabbar-item--active {
        color:  #153744;
        background-color: #fff;
    }
    .botbox {
        flex: 1;
        overflow-y: auto;
        margin-top: -0.2rem;
        color: #000;
    }
    .van-popup--center {
        width: 80%;
        left: 48%;
        height: 50%;
        top: 40%;
         -webkit-transform: translate3d(-50%,-50%,0);
         transform: translate3d(-50%,-50%,0);
    }

    .addressjtemdiv{
        display: flex;
        height: 100%;
        align-items: center;
        border-bottom: 1px solid #eee;
        background:#fff;
        padding-right: 0.25rem;
    }
    /deep/ .van-index-anchor {
        z-index: 1;
        box-sizing: border-box;
        padding-left: 1.5rem;
        color: #323233;
        font-weight: 500;
        font-size: 14px;
        line-height: 32px;
        background-color: rgba(21, 55, 68, 0.1);
    }
</style>